<template>
  <div id="div-table">

    <!--<el-table-->
      <!--slot="table"-->
      <!--:data="tableData"-->
      <!--style="width: 100%">-->
      <!--<el-table-column-->
        <!--prop="date"-->
        <!--label="日期"-->
        <!--width="180">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="name"-->
        <!--label="姓名"-->
        <!--width="180">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="address"-->
        <!--label="地址">-->
      <!--</el-table-column>-->
    <!--</el-table>-->


    <!--<el-button class='el-button-delete-data' :loading="isDeleteBtnLoading" type="danger" v-show="isShowDeleteButton"-->
               <!--@click="deleteSelectionData">删除勾选的数据-->
    <!--</el-button>-->

    <!--<el-button class='el-button-delete-data' :loading="isCancelLightBtnLoading" type="primary"-->
               <!--v-show="isShowCancelLightButton"-->
               <!--@click="cancelLightSelectionData">取消高亮-->
    <!--</el-button>-->

    <el-table :data="tableData"
              border
              style="width: 99%"
              @row-click="rowClick"
              @selection-change="handleSelectionChange"
              :row-class-name="tableRowClassName">

      <!--列，列头-->
      <!--根据表头特征渲染表数据-->
      <template v-for="header in tableHeader" v-if="header.isShow">

        <el-table-column
          v-if="header.type === 'selection'||header.type === 'index'||header.type === ''||typeof(header.type) === 'undefined'"
          :key="header.id"
          :type="header.type"
          :label="header.label"
          :width="header.width"
          :prop="header.prop"
          :min-width="100"
        >
        </el-table-column>

        <!--该列类型为链接的时候 根据prop+link去查找url-->
        <el-table-column
          v-if="header.type === 'link'"
          :key="header.id"
          :type="header.type"
          :label="header.label"
          :width="header.width"
          :prop="header.prop">

          <template slot-scope="scope">
            <a :href="scope.row[header.prop+'_link']"
               class="table-link" style="display: inline-block;width: 100%;cursor:pointer ">{{ scope.row[header.prop] }}</a>
          </template>

        </el-table-column>


        <!--该列类型为action的时候 根据数据中的action去判断显示的操作 edit_delete-->
        <el-table-column
          v-if="header.type === 'action'"
          :key="header.id"
          :type="header.type"
          :label="header.label"
          :width="header.width"
          :prop="header.prop">

          <template slot-scope="scope">
            <!--&& scope.row.action.contains('edit')-->
            <el-button
              v-if="typeof(scope.row.action)!=='undefined' && scope.row.action.indexOf('edit')!==-1"
              size="small"
              @click="handleEdit(scope.$index, scope.row)">{{$getTextByLangKey('编辑')}}
            </el-button>
            <el-button
              v-if="typeof(scope.row.action)!=='undefined' && scope.row.action.indexOf('delete')!==-1"
              size="small" type="danger"
              @click="handleDelete(scope.$index, scope.row)">{{$getTextByLangKey('删除')}}
            </el-button>
          </template>

        </el-table-column>

      </template>


    </el-table>

    <div >
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :currentPage="page.currentPage" :pageSize="page.pageSize"
                     layout=" prev, pager, next, jumper" :total="page.total"></el-pagination>
    </div>


    <el-dialog :show-close=false
               :close-on-press-escape=false
               :close-on-click-modal=false
               :title="title"
               :visible.sync="dialogVisible"
               >


      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">{{$getTextByLangKey('取消')}}</el-button>
        <el-button type="primary" @click="confrimDialog">{{$getTextByLangKey('确定')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


  // import MyUtil from '@/common/js/MyUtil.js'

  export default {
    name: "table-componet",
    props: ['tableHeader', 'tableData', 'page', 'multipleSelection', 'isShowDeleteButton', 'isShowCancelLightButton'],
    data() {
      return {
        title:this.$getTextByLangKey('确定删除数据?'),
        dialogVisible:false,
        isShowDeleteButton: false,
        isShowCancelLightButton: false
      }
    },
    methods: {

//      rowClass: function (row, index) {
//        if (row.isShowHighLight) {
//          return {"background-color": 'rgba(250,85,85,0.2)',}
//        } else {
//        }
//
//    },
//    cellmouseenter: function (row) {
//      console.log(row)
//    },

      tableRowClassName: function (row, rowIndex) {
        if (row.isShowHighLight) {
          return 'warning-row';
        } else {
        }

      },

      handleEdit: function (index, row) {
        this.$emit('handleEdit', index, row)
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },
      handleCurrentChange: function (val) {
        this.$emit("handleCurrentChange", val)
      },
      handleSelectionChange(val) {
        if (val.length > 0) {
          this.isShowDeleteButton = true
          this.isShowCancelLightButton = true

          // MyUtil.checkedActionNow(true)//选中数据的状态
        } else {
          this.isShowDeleteButton = false
          this.isShowCancelLightButton = false
          // MyUtil.checkedActionNow(false)//没有选中数据的状态
        }

        this.$emit("handleSelectionChange", val)

//        this.multipleSelection = val;
//        if( this.multipleSelection.length>0){
////          isShowDeleteButton = true
//        }else{
////          isShowDeleteButton = false
//        }
//        console.log(val)
      },
      deleteSelectionData() {
        this.dialogVisible =true
//        this.$emit("deleteSelectionData")
      },
      cancelLightSelectionData() {
        this.$emit("cancelLightSelectionData")
      },

      cancelDialog: function () {
        this.dialogVisible = false;
      },
      confrimDialog: function () {
        this.dialogVisible = false;
        this.$emit("deleteSelectionData")
      }

    }
  }

</script>


<style>

  #div-table{


  }
  .el-button-delete-data {
    margin-bottom: 5px;
  }

  .el-table {
    /*margin-top: 5px;*/

  }

  .el-table .warning-row {
    /*background-color: rgba(240,195,61,1);*/
    background-color: rgba(240, 195, 61, 0.8);
    /*background-color: rgba(235,158,5,0.2);*/
    color: #FFF;
  }

  .el-table .warning-row:hover > td {
    background-color: rgba(240, 195, 61, 1) !important;
    color: #FFF;
  }

  .warning-row a, .warning-row a:link, .warning-row a:active, .warning-row a:visited, .warning-row a:hover {
    color: #FFF;
  }

  .warning-row:hover a {
    color: #FFF;
  }

  .el-pagination {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: 15px;
  }

  .cell a{
    color: red;
  }

  a:link {
    color: #1f2d3d;
  }

  a:active {
    color: #1f2d3d;
  }

  a:visited {
    color: #1f2d3d;
  }

  a:hover {
    color: #1f2d3d;
  }

  /*.cell{*/
  /*width: 250px !important;*/
  /*}*/

  /*tr td{*/
  /*width: 100px;*/
  /*}*/

</style>
